<template>
  <div class="container">
    <Layout>
      <Content>
        <div class="nav">
          <ul class="category">
            <router-link
              :to="{ path: `/service/nav/orderOnline` }"
              class="adv"
              v-if="Validation.check(Resources.POSTSALE_ONLINE_QRDER)"
              tag="li"
              >在线下单
            </router-link>
            <router-link
              :to="{ path: `/service/nav/customerRecord` }"
              class="adv"
              v-if="Validation.check(Resources.POSTSALE_REPAIR)"
              tag="li"
              >代客报修
            </router-link>
            <router-link
              :to="{ path: `/service/nav/maintain` }"
              class="adv"
              v-if="Validation.check(Resources.POSTSALE_PROTECT)"
              tag="li"
              >维保申请
            </router-link>
            <router-link
              :to="{ path: `/service/nav/maintainRecord` }"
              class="adv"
              v-if="Validation.check(Resources.POSTSALE_RECORD)"
              tag="li"
              >维修记录
            </router-link>
            <router-link
              :to="{ path: `/service/nav/maitainregulation` }"
              class="banner"
              v-if="Validation.check(Resources.POSTSALE_MAINTAIN)"
              tag="li"
              v-show="petee === '1'"
              replace
              >保养规则
            </router-link>
            <!-- <router-link
              :to="{path:`/service/nav/apply`}"
              class="banner"
              tag="li" replace>保养申请
            </router-link> -->
            <router-link
              v-if="Validation.check(Resources.POSTSALE_PROPOSAL)"
              :to="{ path: `/service/nav/sug` }"
              class="banner"
              tag="li"
              replace
              >用户建议
            </router-link>
          </ul>
        </div>
        <div class="right">
          <keep-alive>
            <router-view />
          </keep-alive>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Route } from "vue-router";
import { NavBloc } from "./NavBloc";
import { FormBloc } from "@/view/device/FormBloc";
import { store } from "@/store/Store";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";

@Component({})
export default class extends Vue {
  Validation = Validation;
  Resources = Resources;
  bloc = new NavBloc();
  get petee() {
    return store.state.user.tepee;
  }
}
</script>
<style lang="less" scoped>
.container {
  padding-top: 20px;
}

.nav {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  height: 50px;
  border: 1px solid rgba(242, 242, 242, 1);

  .category {
    li {
      float: left;
      cursor: pointer;
      padding: 17px 0px 12px 50px;
      width: 150px;
      position: relative;

      &:nth-child(4) {
        padding: 17px 0px 12px 50px;
        width: 184px;
      }
    }

    .router-link-active {
      border-bottom: 1px solid blue;
    }
  }
}

.right {
  min-height: 630px;
}

/deep/ .ivu-layout {
  background-color: rgba(255, 255, 255, 1);
}
</style>
